let { $, table, layer, form, upload } = layui;
import Seat from "./seat.js";
export default class Set {
    constructor(data) {
        this.render();
        this.handle(data);
    }
    render() {
        let str = `<script type="text/html" id="adduers">
        <form  class="layui-form" style="width:400px" action="#" lay-filter="student">
            <!-- 影院名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">院线名称</label>
                <div class="layui-input-block">
                    <input id="addname" type="text" name="name" style="width: 200px;" required lay-verify="username" placeholder="请输入院线名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 地址 -->
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input id="addage" type="text" name="addr" style="width: 200px;" required lay-verify="pass" placeholder="请输入院线地址"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 热线 -->
            <div class="layui-form-item">
                <label class="layui-form-label">官网电话</label>
                <div class="layui-input-block">
                    <input type="text" name="tel" style="width: 200px;" required lay-verify="pass" placeholder="请输入官网电话"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 官网 -->
            <div class="layui-form-item">
                <label class="layui-form-label">官网</label>
                <div class="layui-input-block">
                    <input type="text" name="url" style="width: 200px;" required lay-verify="pass" placeholder="请输入官网地址"
                    autocomplete="off" class="layui-input">
                </div>
            </div>
            <div id="addCinemas" class="layui-btn layui-btn-normal">添加放映厅</div>
            <div id ="addDiv" style="max-height: 250px; overflow:auto"></div>
        </form>
        </script>`;
        $("#addStudentTemplate").html(str);
    };
    handle(data) {
        layer.open({
            type: 1,
            btn: ["确定", "取消"],
            title: "修改院线信息",
            success: function () {
                $.ajax({
                    type: "get",
                    url: "/cinemas/" + data._id,

                    success: function (res) {
                        let index = 0;
                        form.val("student", res.data);
                        if (res.data.screens.length > 0) {
                            res.data.screens.forEach(item => {
                                let screenStr = `
                                <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                                    <div class="layui-form-item">
                                    <label class="layui-form-label">放映厅名</label>
                                    <div class="layui-input-block">
                                        <input
                                        value="${item.name}"
                                        type="text"
                                        id="screenName${index}"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入放映厅名"
                                        autocomplete="off"
                                        class="layui-input"
                                        />
                                    </div>
                                    </div>
                                    <div class="layui-form-item">
                                    <label class="layui-form-label">座位排列</label>
                                    <div class="layui-input-block">
                                        <input
                                        value="${item.seat}"
                                        type="text"
                                        id="seat${index}"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入排列"
                                        autocomplete="off"
                                        class="layui-input"
                                        />
                                    </div>
                                    </div>
                                    <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                    <button type="button" data-index="${index}" class="layui-btn layui-btn-warm layui-btn-radius show-seat-btn">查看</button>
                                    <button type="button" data-index="${index}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn">删除</button>
                                    </div>
                                    </div>
                                </div>
                                `;
                                $("#addDiv").append(screenStr);
                                index++;
                                $("#addDiv").on("click", ".show-seat-btn", function () {
                                    let index = $(this).attr("data-index");
                                    // console.log("查看", index);
                                    new Seat($("#seat" + index).val());
                                });
                                $("#addDiv").on("click", ".del-seat-btn", function () {
                                    // console.log("删除");
                                    let index = $(this).attr("data-index");
                                    $("#screenDiv" + index).remove();
                                });
                            })
                        };
                        $("#addCinemas").on("click", function () {
                            let screenStr = `
                            <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                                <div class="layui-form-item">
                                <label class="layui-form-label">放映厅名</label>
                                <div class="layui-input-block">
                                    <input
                                    type="text"
                                    id="screenName${index}"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入放映厅名"
                                    autocomplete="off"
                                    class="layui-input"
                                    />
                                </div>
                                </div>
                                <div class="layui-form-item">
                                <label class="layui-form-label">座位排列</label>
                                <div class="layui-input-block">
                                    <input
                                    type="text"
                                    id="seat${index}"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入排列"
                                    autocomplete="off"
                                    class="layui-input"
                                    />
                                </div>
                                </div>
                                <div class="layui-form-item">
                                <div class="layui-input-inline">
                                <button type="button" data-index="${index}" class="layui-btn layui-btn-warm layui-btn-radius show-seat-btn">查看</button>
                                <button type="button" data-index="${index}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn">删除</button>
                                </div>
                                </div>
                            </div>
                            `;
                            $("#addDiv").append(screenStr);
                            index++;
                            $("#addDiv").on("click", ".show-seat-btn", function () {
                                let index = $(this).attr("data-index");
                                // console.log("查看", index);
                                new Seat($("#seat" + index).val());
                            });
                            $("#addDiv").on("click", ".del-seat-btn", function () {
                                // console.log("删除");
                                let index = $(this).attr("data-index");
                                $("#screenDiv" + index).remove();
                            });
                        });
                        form.render();
                    }
                })
            },
            content: $("#adduers").html(),
            yes: function (index) {
                let screens = [];
                for (let i = 0; i < index; i++) {
                    if ($("#screenDiv" + i).length > 0) {
                        screens.push({
                            name: $("#screenName" + i).val(),
                            seat: $("#seat" + i).val()
                        });
                    }
                };
                $.ajax({
                    type: "put",
                    url: "/cinemas/" + data._id,
                    data: { ...form.val("student"), screens: JSON.stringify(screens) },
                    success: function (res) {
                        if (res.data) {
                            layer.msg("修改成功");
                            layer.close(index);
                            table.reload("studentsTable");
                        }
                    }
                })
            }
        })
    };
}